<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo {
            margin-bottom: 20px;
            padding: 20px;
            border-bottom: 1px solid #1b926c;
        }
        input.ng-invalid {
            border: 3px solid red;
        }
        input.ng-valid {
            border: 3px solid green;
        }
        .error{
            color:red;
            font-weight: bold;
        }
        /*.navbar{*/
        /*border:1px solid #1b926c;*/
        /*background-color: #1fa67a;*/
        /*}*/

    </style>
</head>
<body>

<div class="container">
    <h6>
        <a href="http://www.cnblogs.com/rohelm/p/4033513.html">文章：http://www.cnblogs.com/rohelm/p/4033513.html</a>
    </h6>
    <div class="row">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="../index.html">首页</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0)">Link</a></li>
                    <li><a href="javascript:void(0)">Link2</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div ng-app="myApp">
        <div class="row demo">
            <h3>Demo4: 表单验证</h3>
            <div class="col-md-6">
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-4">
                            <label for="name">1.必填项</label>
                        </div>
                        <div class="col-md-8">
                            <input class="form-control" id="name" type="text" required ng-model='user.name' />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4">
                            <label for="minlength">2.最小长度=5</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4">
                            <label for="minlength">3.最大长度=20</label>
                            　　　　　　　　　　</div>
                        <div class="col-md-8">
                            <input type="text" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4">
                            <label for="minlength">4. 模式匹配</label>
                        </div>
                        <div class="col-md-8">
                            <input type="text" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4">
                            <label for="email">5. 电子邮件</label>
                            　　　　　　　　　　</div>
                        <div class="col-md-8">
                            <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4">
                            <label for="age">6. 数字</label>
                            　　　　　　　　　　</div>
                        <div class="col-md-8">
                            <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4">
                            <label for="url"> 7. URL</label>
                            　　　　　　　　　　</div>
                        <div class="col-md-8">
                            <input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group text-center">
                        <input class="btn btn-primary btn-lg" type="submit" value="提交" />
                    </div>
                </form>
            </div>
            <div class="col-md-12">
                1.必填项:{{user.name}}<br>
                2.最小长度=5:{{user.minlength}}<br>
                3.最大长度=20:{{user.maxlength}}<br>
                4.模式匹配:{{user.pattern}}<br>
                5.电子邮件:{{user.email}}<br>
                6.数字:{{user.age}}<br>
                7.URL:{{user.url}}<br>
            </div>

        </div>
    </div>
</div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>
    var myApp = angular.module("myApp", []);
</script>
